// a small keyboard
// I found that there were not a lot of keyboards on codepen
// So I figured I'd try my hand at it VUALA!
// & dat flatUI Doe
"use strict";


function toggleAllCover() {
    var covers = document.getElementsByClassName("sec-cover");

    for (var i = 0; i < covers.length; i++) {
        if (covers[i].style.visibility === "hidden") {
            covers[i].style.visibility = "visible";

            //the loop here is to make the show and hide of children
            //nodes be consist with its parent node
            for (var j = 0; j < covers[i].children.length; j++) {
                covers[i].children[j].style.visibility = "visible";
            }
        } else {
            covers[i].style.visibility = "hidden";

            for (var j = 0; j < covers[i].children.length; j++) {
                covers[i].children[j].style.visibility = "hidden";
            }
        }
    }
}

function clickEvent(e) {
    e.preventDefault();

    var element = e.target;
    //the using of indexOf here is to sovle the compitibility
    //issue with IE 11
    if (element.className.indexOf("sub-sec-cover") == 0) {
        element.style.visibility = "hidden";
    }

    //if click the left most key of each row or the plus key of section-d
    if (element.attributes.data) {
        var coverClass = element.attributes.data.value;

        document.getElementsByClassName(coverClass)[0].style.visibility = "visible";
    }

    if (element.className.indexOf("keyboard") == 0) {
        toggleAllCover();
    }

    return false;
}
document.addEventListener("dblclick", clickEvent);
document.addEventListener("contextmenu", clickEvent);